<!-- 热门游戏轮播图组件 -->
<template>
    <div class="gameInfoCard" v-if="game.data">
        <div class="gameInfo">
            <div class="left">
                <div class="imgs">
                    <el-carousel height="270px">
                        <el-carousel-item v-for="(image, index) in imageList" :key="index">
                            <img :src="image" alt="轮播图" class="images">
                        </el-carousel-item>
                    </el-carousel>
                </div>
                <div class="icon-name">
                    <img class="icon" :src="game.data.icon" alt="">
                    <h4 class="name">{{ game.data.gname }}</h4>
                    <div>
                        <el-tag class="tag" type="warning" effect="dark">{{ game.data.tname }}</el-tag>
                    </div>
                </div>
                <div v-if="game.data.moretype" class="tags">
                    <el-tag class="tag" type="info" effect="light" v-for="tag in game.data.moretype.split(',')"
                        :key="tag">{{ tag }}</el-tag>
                </div>
            </div>
            <div class="right">
                <ul>
                    <li>
                        <label>游戏出品方：</label>
                        <span>{{ game.data.company }}</span>
                    </li>
                    <li>
                        <label>游戏价格：</label>
                        <span>￥{{ game.data.price }}</span>
                    </li>
                    <li>
                        <label>发行时间：</label>
                        <span>{{ game.data.onsaledate }}</span>
                    </li>
                </ul>
                <div class="des">
                    <label>游戏简介：</label>
                    <div class="ins">
                        {{ game.data.detail || '暂无' }}
                    </div>
                </div>
                <div class="des">
                    <label>审核意见：</label>
                    <div class="ins">
                        {{ game.data.reason || '暂无' }}
                    </div>
                </div>
            </div>
        </div>
        <div class="do">
            <h4 v-if="game.data.status === 0">审核中……</h4>
            <h4 v-if="game.data.status === 2">审核未通过,请重新修改信息上传</h4>
            <el-button type="danger" v-if="game.data.status === 1" @click="handleDown">下架</el-button>
            <el-button type="success" v-if="game.data.status === 3" @click="handleUp">上架</el-button>
            <el-button type="primary" v-if="game.data.status !== 0" @click="handleEdit">编辑信息</el-button>

        </div>

        <!-- 编辑信息的对话框 -->
        <el-dialog v-model="editDialogVisible" title="编辑游戏信息" width="500px" style="padding-left:20px">
            <el-row :gutter="20">
                <el-col :span="24">
                    <el-form :model="editForm">
                        <el-form-item label="游戏名称">
                            <el-input class="input" v-model="editForm.gname"></el-input>
                        </el-form-item>
                        <el-form-item label="游戏价格">
                            <div class="choose-container">
                                <el-input-number v-model="editForm.price" :min="0" :max="9999" :step="1"
                                    :precision="2" />
                                <span style="margin-left: 5px;">元</span>
                            </div>
                        </el-form-item>
                        <el-form-item label="游戏出品方">
                            <el-input class="input" v-model="editForm.company"></el-input>
                        </el-form-item>
                        <el-form-item label="游戏类型">
                            <el-select v-model="editForm.tname" placeholder="请选择游戏类别" clearable>
                                <el-option label="动作" value="动作" />
                                <el-option label="冒险" value="冒险" />
                                <el-option label="休闲" value="休闲" />
                                <el-option label="模拟" value="模拟" />
                                <el-option label="竞速" value="竞速" />
                                <el-option label="恐怖" value="恐怖" />
                                <el-option label="角色扮演" value="角色扮演" />
                                <el-option label="生存" value="生存" />
                                <el-option label="策略" value="策略" />
                            </el-select>
                        </el-form-item>
                        <!-- <el-form-item label="发行日期">
                            <el-date-picker v-model="editForm.onsaledate" type="date" placeholder="选择发行日期"
                                value-format="yyyy-MM-dd" />
                        </el-form-item> -->
                        <el-form-item label="游戏标签">
                            <div class="flex gap-2">
                                <el-tag v-for="tag in editForm.dynamicTags" :key="tag" closable
                                    :disable-transitions="false" @close="handleClose(tag)" class="tag">
                                    {{ tag }}
                                </el-tag>
                                <el-input v-if="editForm.inputVisible" ref="InputRef" v-model="editForm.inputValue"
                                    class="tag" size="small" @keyup.enter="handleInputConfirm"
                                    @blur="handleInputConfirm" />
                                <el-button v-else class="tag" size="small" @click="showInput">
                                    + 添加标签
                                </el-button>
                            </div>
                        </el-form-item>
                        <el-form-item label="游戏简介">
                            <el-input class="intro" type="textarea" v-model="editForm.detail" :rows="5"></el-input>
                        </el-form-item>
                    </el-form>
                </el-col>
            </el-row>
            <template #footer>
                <el-button @click="handleCloseF">返回</el-button>
                <el-button type="primary" @click="handleSubmit">提交</el-button>
            </template>
        </el-dialog>
    </div>
</template>

<script setup>
import { ref, onMounted, nextTick, defineProps, defineEmits } from 'vue';
import { ElMessageBox, ElDialog, ElMessage } from 'element-plus';
import { myAxios } from '@/axios/index';

// 定义接收的 props
const game = defineProps({
    data: {
        type: Object,
        required: true
    }
});

const emit = defineEmits(['update-game']);

const imageList = ref([]);
const editDialogVisible = ref(false); // 控制对话框的显示与隐藏
const editForm = ref({
    gname: '',
    price: 0,
    company: '',
    tname: '',
    // onsaledate: '',
    detail: '',
    dynamicTags: [], // 存储动态标签的数组
    inputVisible: false, // 控制输入框是否显示
    inputValue: '', // 输入框的值
});
const InputRef = ref(null); // 输入框的引用

const fetchData = () => {
    imageList.value = [game.data.photo, game.data.photoa, game.data.photob, game.data.photoc, game.data.photod];

    const motype = game.data.moretype ? game.data.moretype.split(',').map(tag => tag.trim()) : null;

    editForm.value = {
        gname: game.data.gname,
        price: Number(game.data.price),
        company: game.data.company,
        tname: game.data.tname,
        // onsaledate: game.data.onsaledate,
        detail: game.data.detail,
        dynamicTags: motype,
        inputVisible: false,
        inputValue: '',
    };
};

const handleDown = async () => {
    const message = `确定要下架${game.data.gname}吗？`;
    const confirmResult = await ElMessageBox.confirm(message, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
    }).catch(() => { });

    if (confirmResult === 'confirm') {
        console.log('下架');
        const response = await myAxios.put('/goodsAdmin/updateInfo', {
            gid: game.data.gid,
            status: 3
        });
        console.log('下架', response.data);
    }

    emit('update-game', game.data.status, 3);
};

const handleUp = async () => {
    const message = `确定要上架${game.data.gname}吗？`;
    const confirmResult = await ElMessageBox.confirm(message, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
    }).catch(() => { });

    if (confirmResult === 'confirm') {
        console.log('上架');

        const response = await myAxios.put('/goodsAdmin/updateInfo', {
            gid: game.data.gid,
            status: 0
        });
        console.log('上架', response.data);
    }
    emit('update-game', game.data.status, 0);
};

const handleEdit = () => {
    editDialogVisible.value = true;
};
const handleCloseF = async () => {
    const message = `确定要返回吗？已修改的信息将不会保存`;
    const confirmResult = await ElMessageBox.confirm(message, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
    }).catch(() => { });

    if (confirmResult === 'confirm') {
        editDialogVisible.value = false;
    }
};
const handleSubmit = async () => {
    const message = `确定要提交游戏 ${game.data.gname} 的修改吗？`;
    const confirmResult = await ElMessageBox.confirm(message, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
    }).catch(() => { });

    if (confirmResult === 'confirm') {
        editDialogVisible.value = false;
        const response = await myAxios.put('/goodsAdmin/updateInfo', {
            gid: game.data.gid,
            gname: editForm.value.gname,
            price: editForm.value.price,
            company: editForm.value.company,
            tname: editForm.value.tname,
            // onsaledate: editForm.value.onsaledate,
            moretype: editForm.value.dynamicTags.join(','),
            status: 0
        });
        emit('update-game', game.data.status, 0);
    }
};

const handleClose = (tag) => {
    const index = editForm.value.dynamicTags.indexOf(tag);
    if (index > -1) {
        editForm.value.dynamicTags.splice(index, 1);
    }
};

const showInput = () => {
    if (editForm.value.dynamicTags.length >= 5) {
        ElMessage.warning('最多添加 5 个标签');
        return;
    }
    editForm.value.inputVisible = true;
    nextTick(() => {
        if (InputRef.value) {
            InputRef.value.focus();
        }
    });
};

const handleInputConfirm = () => {
    if (editForm.value.inputValue.length > 4) {
        ElMessage.warning('每个标签不能超过四个字符');
        editForm.value.inputValue = '';
        editForm.value.inputVisible = false;
        return;
    }
    if (editForm.value.inputValue) {
        editForm.value.dynamicTags.push(editForm.value.inputValue);
    }
    editForm.value.inputVisible = false;
    editForm.value.inputValue = '';
};

onMounted(() => {
    fetchData();
    // console.log(game.data)
});
</script>

<style lang="less" scoped>
.gameInfoCard {
    margin-bottom: 15px;
    height: 470px;
    width: 950px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background-color: #181F2D;
    border-radius: 10px;

    .gameInfo {
        display: flex;
        flex-direction: row;
        justify-content: center;
        margin-top: 20px;

        .left {
            padding: 0;
            display: flex;
            flex-direction: column;
            // margin-right: 20px;
            height: 370px;
            width: 430px;
            .imgs {
                width: 400px;
                height: 250px;
                background-color: #181F2D;


                .images {
                    width: auto;
                    height: 230px;
                    max-width: 100%;
                    max-height: 100%;
                    margin: auto;
                    display: block;
                    object-fit: contain;
                    background-color: #181F2D;
                }
            }

            .icon-name {
                margin-top: 30px;
                width: 400px;
                height: 50px;
                display: flex;
                flex-direction: row;
                justify-content: flex-start;
                align-items: center;

                .icon {
                    width: 45px;
                    height: 45px;
                    object-fit: contain;
                }

                .name {
                    height: 80px;
                    margin-left: 10px;
                    font-size: 22px;
                    color: white;
                    font-weight: 600;
                    display: flex;
                    align-items: center;
                    margin-right: 10px;
                }
            }

            .tags {
                margin-top: 10px;
                width: 400px;
                height: 30px;
                display: flex;
                justify-content: flex-start;
                align-items: center;
             
                .tag {

                    margin-right: 10px;
                }
            }
        }

        .right {
            width: 450px;
            height: 360px;
            background-color: rgba(69, 68, 68, 0.317);
            color: white;
            font-size: 18px;
            padding: 5px;
            word-break: break-all;
            overflow-wrap: break-word;
            overflow-y: auto;

            ul {
                list-style: none;
                padding: 20px;
                padding-bottom: 0;

                li {
                    height: 30px;
                    display: flex;
                    flex-direction: row;
                    justify-content: flex-start;

                    span {
                        height: 24px;
                        line-height: 24px;
                    }
                }
            }

            &::-webkit-scrollbar {
                width: 6px;
            }

            &::-webkit-scrollbar-track {
                background: transparent;
            }

            &::-webkit-scrollbar-thumb {
                background: #999;
                border-radius: 3px;
            }

            &::-webkit-scrollbar-thumb:hover {
                background: #777;
            }
        }

        .des {
            padding: 20px;
            padding-top: 0;
            padding-bottom: 5px;

            .ins {
                padding: 8px;
                width: 400px;
                word-break: break-all;
                overflow-wrap: break-word;
                height: auto;
                text-indent: 2em;
            }
        }
    }

    .do {
        width: 910px;
        height: 40px;
        align-items: center;
        display: flex;
        justify-content: flex-end;
        margin-top: 10px;

        h4 {
            margin-right: 10px;
            color: red;
        }
    }

    .input {
        width: 200px;
    }

    .choose-container {
        display: flex;
        align-items: center;
    }

    .el-form-item {
        margin-bottom: 15px;
    }

    .tag {
        width: 70px;
        margin-top: 5px;
        margin-right: 5px;
        margin-left: 0px;
        margin-bottom: 0px;
    }


}
</style>